import { Base } from '../base.js'
import * as THREE from 'three'
import TWEEN, { Group } from '../utils/tween.js'
import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils.js'
import { Utils, PlayerAnimate } from './utils.js'
import { Plan } from './plan.js'
import { Move } from './move.js'

export class Pic extends Base {
	resources:any = {} 
	group = new THREE.Group()
	giftMesh = new THREE.Group()
	clock = new THREE.Clock()
	mixers: THREE.AnimationMixer[] = []
	actions: THREE.AnimationAction[] = []
	giftPosOrigin: THREE.Vector3[] = []
	giftPosList: (THREE.Vector3 | null)[] = []
	players:PlayerAnimate[] = []
	users:{id:number, name:string}[] = []
	constructor(id: string) {
		super(id, false)
		this.camera.position.set(0, 40, 0)
		this.renderer.setClearColor(0x000000, 0)
		// this.controls.enabled = false
	}
	getEuler(angle: number, r: number) {
		const a = new THREE.Euler(
			THREE.MathUtils.degToRad(Math.random() * 360),
			THREE.MathUtils.degToRad(angle),
			THREE.MathUtils.degToRad(Math.random() * 360),
			'XYZ'
		)
		const b = new THREE.Vector3(r, 0, 0)
		b.applyEuler(a)
		return b
	}
	initMap() {
		this.camera.position.set(0, 5, 15)
		// new THREE.TextureLoader().load('./images/plaster.jpg', (map) => {
		// 	map.wrapS = THREE.RepeatWrapping
		// 	map.wrapT = THREE.RepeatWrapping
		// 	map.repeat.set(800, 800)

		// 	const material = new THREE.MeshPhongMaterial({
		// 		map: map,
		// 		side: THREE.DoubleSide
		// 	})

		// 	const mesh = new THREE.Mesh(
		// 		new THREE.PlaneGeometry(5000, 5000),
		// 		material
		// 	)
		// 	mesh.rotateX(THREE.MathUtils.degToRad(90))
		// 	mesh.position.y = -2
		// 	mesh.name = 'map1'
		// 	mesh.receiveShadow = true
		// 	this.scene.add(mesh)
		// })
	}
	async createPlayer(resName: string, playerInfo:{id:number, name:string}) {

		const object1 = this.resources[resName]
		// object1.rotateY(THREE.MathUtils.degToRad(90))
		object1.scale.setScalar(0.025)
		
		const cpObject = SkeletonUtils.clone(object1)
		const objUtils = Utils.createAnimate(cpObject, player => {
			const index = this.users.findIndex(v => v.id === player.userData.id)
			const mixIndex = this.mixers.findIndex(v => v === objUtils.mixer)
			this.users.splice(index, 1)
			this.mixers.splice(mixIndex, 1)
		})
		
		const spr = this.create3dText(playerInfo.name, {
			color: '#ff8800',
			bl: 1
		})
		cpObject.userData.id = playerInfo.id
		spr.position.y = 220
		cpObject.add(spr)
		this.mixers.push(objUtils.mixer)
		this.scene.add(cpObject)
		this.players.push(objUtils)
		return objUtils
		
	}
	async initObject() {
		this.initMap()
		
		this.resources = await Utils.loadRes(this)
		console.log('资源加载完成')
		const player = await this.createPlayer('boy', {
			name: '这距离就像飞鸟和鱼',
			id: 1
		})
		;(window as any).player = player
		console.log('角色初始化完成')
		player.common('dance1')
		setTimeout(async () => {
			// await player.moveTo(new THREE.Vector3(0, 0, 10))
			// await player.moveTo(new THREE.Vector3(0, 0, 0))
		}, 100)
		// await player.common('Flair2')
		// await player.common('Flair3')
		// player.moveTo(new THREE.Vector3(0, 0, 0))
		// this.initPlayers()
		// await this.initGift()
		// this.createGift(5)
		// this.createGift(5)
	}
	initTree(model:THREE.Group) {
		const obj:any = {}
		const loop = (models:THREE.Object3D[]) => {
			let strHtml = ``
			models.forEach(v => {
				strHtml+=`<div class="items">
					<div class="gname" data-id="${v.id}">${v.type} - ${v.name}</div>
					<div class="group">${loop(v.children)}</div>
				</div>`
				obj[v.id] = v
			})
			return strHtml
		}
		
		const tree = document.getElementById('tree')
		if (tree) {
			tree.style.display = 'block'
			tree.innerHTML = loop(model.children)
			let prev:any = null
			tree.querySelectorAll('.gname').forEach(k => {
				k.addEventListener('click', e => {
					if (prev) {
						prev.classList.remove('active')
					}
					prev = k
					k.classList.add('active')
					const id = k.getAttribute('data-id')
					if (id) {
						console.log(obj[id])
						obj[id].material.transparent = true
						obj[id].material.opacity = 0
						setTimeout(() => {
							obj[id].material.opacity = 1
						}, 500)
					}
					
				})
			})
		}
	}
	onRender() {
		const delta = this.clock.getDelta()
		this.mixers.forEach((v) => {
			v.update(delta)
		})
		TWEEN.update()
	}
}
